<template>
  <div id="info">
    <h4 class="weui-header-title" style="position: relative; background-color: #333;color: #FFFFFF; text-align: center; height: 40px;line-height: 40px">
      <span class="arrow"></span>
      <span style="position: absolute;left: 20px;top: 0;" @click="reTurn()">返回</span>
      <span style="position: absolute;left: 60px;top: 0;" @click="close()">关闭</span>
    </h4>
    <iframe width="100%" height="627px" id='iFrame' :src="infoUrl" frameborder="0"></iframe>
  </div>


</template>

<script>
  export default {
    data: function () {
      return {
        infoUrl: ''
      }
    },
    mounted: function() {
      $('#info').animateCss('bounceInRight', function() {
        // Do somthing after animation
      });
    },
    created: function () {
      this.infoUrl = this.$root.infoUrl;
      let that = this;
      window.onresize = function () {
        that.changeFrameView();
      };
      var loading = weui.loading('加载中');
      Vue.nextTick(function () {
        document.getElementById('iFrame').onload = function () {
          loading.hide()
        }
      })
    },
    methods: {
      changeFrameView:function () {
        let ifm = document.getElementById("iFrame");
        ifm.height = document.documentElement.clientHeight;
        ifm.width = document.documentElement.clientWidth;
      },
      reTurn: function () {
        window.history.back();
      },
      close: function () {
        this.$router.push('/main')
      }
    }
  }
</script>

<style scoped>
  .arrow{
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #FFFFFF;
    border-style: solid;
    -webkit-transform: matrix(-0.71, -0.71, 0.71, -0.71, 0, 0);
    transform: matrix(-0.71, -0.71, 0.71, -0.71, 0, 0);
    position: absolute;
    top: 50%;
    margin-top: -4px;
    left: 10px;
  }

</style>
